<template>
  <div class="question_detail" @click="questionClick">
    <div class="question">{{index+1}}、{{item.question}}</div>
    <div class="answer">{{item.answer}}</div>
  </div>
</template>

<script>
  export default {
    name: "QuestionDetail",
    props: {
      item: {
        type: Object,
        default() {
          return {}
        }
      },
      index: Number
    },
    methods: {
      questionClick() {
        // console.log(this.index)
      }
    }
  }
</script>

<style scoped>
  .question_detail {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    font-size: 15px;
  }

  .question_detail:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
  }

  .question {
    font-weight: 700;
  }

  .answer {
    margin-top: 15px;
    line-height: 1.7;
  }
</style>
